<!DOCTYPE html>
<html lang="zh-cn">
    <head>
        <meta charset="UTF-8"/>
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <title>Document</title>
        <style>
            .container > div{
                display: inline-block;
            }
            .box{
                width: 200px;
                height: 200px;
                line-height: 40px;
                font-size: 20px;
                color:#333;
                background-color: #f00;
                border:8px solid #000;
            }
            .opacity-rgba{
                opacity:.5;
            }
            .opacity-filter{
                filter:alpha(opacity=50);
            }
            .opacity-filter1{
                filter:progid:DXImageTransform.Microsoft.gradient(startcolorstr=#7F000000,endcolorstr=#7F000000);
                /*filter:progid:DXImageTransform.Microsoft.gradient(startcolorstr=#7FFFFF00,endcolorstr=#7FFFFF00);*/
                /*filter:progid:DXImageTransform.Microsoft.gradient(startcolorstr=#7FFF0000,endcolorstr=#7FFF0000);*/
            }
            .opacity-filter2{
                /*filter:progid:DXImageTransform.Microsoft.gradient(startcolorstr=#7F000000,endcolorstr=#7F000000);*/
                background-color: rgba(255,0,0,.5);
                filter:progid:DXImageTransform.Microsoft.gradient(startcolorstr=#7FFF0000,endcolorstr=#7FFF0000);
            }
            .opacity_bg_box{
                background:rgba(0,0,0,0.5);
                -moz-border-radius:5px;
                -webkit-border-radius:5px;
                border-radius:5px;
                filter:progid:DXImageTransform.Microsoft.gradient(startcolorstr=#7F000000,endcolorstr=#7F000000);
                padding:8px;
                position:absolute;
                top:20px;
            }
            .opacity_in_box{
                border:1px solid #f0f3f9;
                background:white;
                font-size:0;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="box"><p>虚心使人进步，骄傲使人落后</p></div>
            <div class="box opacity-rgba"><p>我要在本周看完聪明的投资者</p></div>
            <div class="box opacity-filter"><p>我不疼苦，我只是很孤独</p></div>
            <div class="box opacity-filter1"><p>我不疼苦，我只是很孤独</p></div>
            <div class="box opacity-filter2"><p>我不疼苦，我只是很孤独</p></div>
        </div>
        <p>据内部人士的透露，中国联通预计将在9月份推出行货版四代iPhone手机，行货版四代iPhone将内置Wi-Fi功能，同时具有Wi-Fi功能的 iPhone 3GS将替代iPhone 3G，预计售价也会相应下调。该消息人士还表示，联通iPad也已经谈妥，联通并不会绑定苹果iPad，也不提供合约计划，只是协助销售数据卡。 </p>
        <div class="opacity_bg_box">
            <div class="opacity_in_box">
                <img src="http://image.zhangxinxu.com/image/study/s/s256/mm13.jpg" />
            </div>
        </div>
    </body>
</html>